<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
        <!-- 是否有效 -->
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.isValid === true" style="color: #00a200; font-size: 14px;"></i>
          <i class="el-icon-error" v-else style="color: red; font-size: 14px;"></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cate_level===1">一级</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.cate_level===2">二级</el-tag>
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt" slot-scope='scope'>
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialog(scope.row._id, scope.row.cate_level)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCateById(scope.row._id, scope.row.cate_level)">删除</el-button>
        </template>
      </tree-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="querInfo.pagenum" :page-sizes="[3, 5, 10, 15]" :page-size="querInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

    <!-- 添加分类的对话框 -->
    <el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
      <!-- 添加分类的表单 -->
      <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
        <el-form-item label="分类名称：" prop="title">
          <el-input v-model="addCateForm.title"></el-input>
        </el-form-item>
        <el-form-item label="父级分类：">
          <!-- options 用来指定数据源 -->
          <!-- props 用来指定配置对象 -->
          <el-cascader :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" @change="parentCateChanged" clearable>
          </el-cascader>
        </el-form-item>
				<el-form-item label="图标" prop="icon" v-if="selectedKeys.length == 2">
					<el-upload
					  class="avatar-uploader"
					  :action="api_upload"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess">
					  <img v-if="addCateForm.icon" :src=" api_url + addCateForm.icon" class="avatar" />
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改分类的对话框 -->
    <el-dialog title="修改分类" :visible.sync="editCateDialogVisible" width="50%" @close="editCateDialogClosed">
      <!-- 添加分类的表单 -->
      <el-form :model="editCateForm" :rules="editCateFormRules" ref="editCateFormRef" label-width="100px">
        <el-form-item label="分类名称：" prop="title">
          <el-input v-model="editCateForm.title"></el-input>
        </el-form-item>
				<!-- 是否推荐 -->
				<el-form-item label="是否有效：" prop="isValid">
					<el-radio-group v-model="editCateForm.isValid" size="small">
					  <el-radio :label="true" border>是</el-radio>
					  <el-radio :label="false" border>否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="图标" prop="icon" v-if="editCateForm.cate_level == 3">
					<el-upload
					  class="avatar-uploader"
					  :action="api_upload"
					  :show-file-list="false"
					  :on-success="handleIconSuccess">
					  <img v-if="editCateForm.icon" :src=" api_url + editCateForm.icon" class="avatar" />
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
			api_url: this.$api_url,
			api_upload: this.$api_upload,
      // 查询条件
      querInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      // 商品分类的数据列表，默认为空
      catelist: [],
      // 总数据条数
      total: 0,
      // 为table指定列的定义
      columns: [
        {
          label: '分类名称',
          prop: 'title'
        },
        {
          label: '是否有效',
          // 表示，将当前列定义为模板列
          type: 'template',
          // 表示当前这一列使用模板名称
          template: 'isok'
        },
        {
          label: '排序',
          // 表示，将当前列定义为模板列
          type: 'template',
          // 表示当前这一列使用模板名称
          template: 'order'
        },
        {
          label: '操作',
          // 表示，将当前列定义为模板列
          type: 'template',
          // 表示当前这一列使用模板名称
          template: 'opt'
        }
      ],
      // 控制添加分类对话框的显示与隐藏
      addCateDialogVisible: false,
      // 添加分类的表单数据对象
      addCateForm: {
        // 将要添加的分类的名称
        title: '',
        // 父级分类的Id
        _id: 0,
        // 分类的等级，默认要添加的是1级分类
        cate_level: 1,
				// 三级分类图标
				icon: ''
      },
      // 添加分类表单的验证规则对象
      addCateFormRules: {
        title: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }      
				]
			},
			// 修改分类表单的验证规则对象
			editCateFormRules: {
			  title: [
			    { required: true, message: '请输入分类名称', trigger: 'blur' }
			  ],
				isValid: [
				  { required: true, message: '请选择有效性', trigger: 'blur' }
				] ,
			},
      // 父级分类的列表
      parentCateList: [],
      // 指定级联选择器的配置对象
      cascaderProps: {
        value: '_id',
        label: 'title',
        children: 'children',
        expandTrigger: true,
        checkStrictly: true
      },
      // 选中的父级分类的Id数组
      selectedKeys: [],
      // 控制修改分类对话框的显示与隐藏
      editCateDialogVisible: false,
      editCateForm: {
        _id: '',
        title: '',
				cate_level: '',
				isValid: true,
				icon: ''
      }
    }
  },
  created () {
    this.getCateList()
  },
  methods: {
    // 获取商品分类数据
    async getCateList () {
      const { data: res } = await this.$http.get('categories', {
        params: this.querInfo
      })
			console.log(res);
      if (res.code !== 200) return this.$message.error(res.msg)

      // 把数据列表，赋值给 catelist
      this.catelist = res.data.data;
      // 为总数据条数赋值
      this.total = res.data.total
			this.$message.success(res.msg)
      console.log(this.catelist)
    },
    // 监听 pagesize 改变
    handleSizeChange (newSize) {
      this.querInfo.pagesize = newSize
      this.getCateList()
    },
    // 监听 pagenum 改变
    handleCurrentChange (newPage) {
      this.querInfo.pagenum = newPage
      this.getCateList()
    },
    // 点击按钮，展示添加分类的对话框
    showAddCateDialog () {
      // 先获取父级分类的数据列表
      this.getParentCateList()
      // 再展示出对话框
      this.addCateDialogVisible = true
    },
    // 获取父级分类的数据列表
    async getParentCateList () {
      const { data: res } = await this.$http.get('categories')
			console.log(res);
      if (res.code !== 200) return this.$message.error(res.msg)
			this.$message.success(res.msg)
      this.parentCateList = res.data;
			this.parentCateList.forEach(item=>{
				if (item.children) {
					item.children.forEach(items=> {
						delete items.children
					})
				} 
			})
    },
    // 选择项发生变化触发这个函数
    parentCateChanged () {
      console.log(this.selectedKeys)
      // 如果 selectedKeys 数组中的 length 大于0，证明选中了父级分类
      // 反之，就说明没有选中任何父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的Id
        this.addCateForm._id = this.selectedKeys[
          this.selectedKeys.length - 1
        ]
        // 为当前分类的等级赋值
        this.addCateForm.cate_level = this.selectedKeys.length + 1;
      } else {
        // 父级分类的Id
        this.addCateForm._id = 0
        // 为当前分类的等级赋值
        this.addCateForm.cate_level = 1
      }
    },
    // 点击按钮，添加新的分类
    addCate () {
			console.log(this.addCateForm);
      this.$refs.addCateFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('categories',this.addCateForm)
				console.log(res)
        if (res.code !== 200) return this.$message.error(res.msg)
        this.$message.success(res.msg)
        this.getCateList()
        this.addCateDialogVisible = false
      })
    },
    // 监听添加分类对话框的关闭事件，重置表单数据
    addCateDialogClosed () {
      this.$refs.addCateFormRef.resetFields()
      this.selectedKeys = []
      this.addCateForm.cate_level = 1
      this.addCateForm._id = 0
    },
    // 监听修改分类对话框的关闭事件，重置表单数据
    editCateDialogClosed () {
      this.$refs.editCateFormRef.resetFields()
      this.editCateForm.cat_id = ''
      this.editCateForm.title = ''
      // console.log(this.editCateForm)
    },
    // 修改分类编辑按钮
    async editDialog (cateId,level) {
      console.log(cateId,level)
      const { data: res } = await this.$http.get('categories/' + cateId + '/' + level )
			console.log(res);
      if (res.code !== 200) return this.$message.error(res.msg)

			this.$message.success(res.msg)
      this.editCateForm._id = res.data._id
      this.editCateForm.title = res.data.title
      this.editCateForm.cate_level = res.data.cate_level
      this.editCateForm.isValid = res.data.isValid;
      this.editCateForm.icon = res.data.icon;
      this.editCateDialogVisible = true
    },
    // 点击按钮，修改分类
    editCate () {
			console.log(this.editCateForm);
      this.$refs.editCateFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put('categories/' + this.editCateForm._id + '/' + this.editCateForm.cate_level , { title: this.editCateForm.title, icon: this.editCateForm.icon, isValid: this.editCateForm.isValid })
				console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg)
				
        this.$message.success(res.msg)
        this.getCateList()
        this.editCateDialogVisible = false
      })
    },
    // 删除分类
    async removeCateById (catId,level) {
      // 弹框询问角色是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除,则返回值为字符串 confirm
      // 如果用户取消了删除,则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      const { data: res } = await this.$http.delete('categories/' + catId + '/' + level)
			console.log(res);
      if (res.code !== 200) return this.$message.error(res.msg)
			
      this.$message.success(res.msg)
      this.getCateList()
    },
		handleAvatarSuccess(res, file) {
			console.log(res);
		  this.addCateForm.icon = res[0].file;
			console.log(this.addCateForm.icon);
		},
		handleIconSuccess(res, file) {
			console.log(res);
		  this.editCateForm.icon = res[0].file;
			console.log(this.editCateForm.icon);
		},
  }
}
</script>

<style lang="less" scoped>
.treeTable {
  margin-top: 15px;
}

.el-cascader {
  width: 100%;
}
/deep/ .avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 120px;
	    height: 120px;
	    line-height: 120px;
	    text-align: center;
	  }
	  .avatar {
	    width: 120px;
	    height: 120px;
	    display: block;
	  }
</style>
